<template>
  <div class="profile-container">
    <s-header :name="'个人信息'" />
    <van-form @submit="handleInfo">
      <div class="profile-header">
        <van-uploader :after-read="afterRead">
          <!-- <template #preview-cover="{ file }">
            <div class="avatar">
              <van-image :src="file" />
            </div>
          </template> -->
          <div class="avatar">
            <div style="width: ;">
              <van-image :src="userForm.avatar" width="85" height="85" round cover />
            </div>
            <div class="avatar-title">
              点击更换头像
            </div>
            </div>
          </van-uploader>
        </div>
        <van-cell-group inset>
          <van-field v-model="userForm.nickName" label="昵称" placeholder="请输入昵称" input-align="right" />
          <van-field v-model="userForm.phonenumber" label="手机号码" placeholder="请输入手机号码" input-align="right" />
          <van-cell center title="性别" :value="sexColumns[userForm.sex]"  @click="showPopup" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" color="linear-gradient(to right, #ff6034, #ee0a24)">保存</van-button>
          </div>
        <div>
      </div>
    </van-form>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
      <van-picker
        title="性别"
        show-toolbar
        :columns="sexColumns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>

import SHeader from '@/components/SHeader.vue'
import { updateUser, getUserInfo } from '@/api/user'
import { upload} from '@/api/file'
import { getToken } from '@/utils/auth'
import { Toast } from 'vant'

export default {
  name: 'profile',
  data() {
    return {
      userForm: {},
      show: false,
      sexColumns: ['男', '女', '未知'],
    }
  },
  components: {
    SHeader
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      const token = getToken()
      getUserInfo(token).then(res => {
        this.userForm = res.data
      }) 
    },
    async handleInfo() {
      await updateUser(this.userForm).then(res => {
        if(res.code === 200){
          Toast.success("提交成功")    
        }
      })
      await this.$store.dispatch('user/getInfo')
      this.$router.go(0)
    },
    afterRead(file) {
      // let imgUrl = file.content;
      let img = file.file;
      console.log(file);
      if (img.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(img);
      reader.onloadend = () => {
        let file = img;
        let param = new FormData();
        param.append("file", file, file.name);
        upload(param).then(res => {
          this.userForm.avatar = res.data;
        })
      };
      return true;
    },
    showPopup() {
      this.show = true
    },
    onConfirm(value, index) {
      this.userForm.sex = index;
      this.show = false
    },
    onCancel() {
      this.show = false
    }
  },
  
}
</script>

<style lang="scss" scoped>

  .profile-container {
    .profile-header {
      margin: 0 0.426667rem;
      overflow: hidden;
      border-radius: 0.213333rem;
      box-sizing: border-box;
      padding: 38px;
      margin-top: 12px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      .avatar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .avatar-title {
          font-size: 15px;
          margin-top: 6px;
          color: #323233;
        }
      }
    }
  }
</style>